<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="app.css"/>
    <script src="jquery-1.11.3.js" type="text/javascript"></script>

</head>
<body>


<div class="rota_div">
    hello
</div>

<div class="rectangle_div">
    <span class="rectangle_div_content">文字内容</span>
</div>


<div class="col1">


</div>


<script type="text/javascript">
    $(".col1").each(function () {
        var sop = '<span class="ch">'; //span opening
        var scl = '</span>'; //span closing

        // 得到浏览器宽度
        var window_width = $(window).width();
        var window_height = $(window).height();
        console.log("window_width: " + window_width);
        console.log("window_height: " + window_height);

        var result = '';
        var bar = "<br />";
        var space = '';

//        for(var t =0; t<50; t++){
//            space = space + " ";
//        }
        for (var i = 1; i <= 10; i++) {
            for (var j = 1; j <= 10; j++) {
                //var sop = '<span class="ch"'+i+'>'; //span opening
                //var scl = '</span>'; //span closing
                result = result + sop + space + j * i + scl;
                $(this).html(result);
            }

            result = result + bar;

        }

        $(".ch").width(window_width / 11);  // 动态设置元素的宽度
        $(".ch").height(100);
        //$(".ch").style().lineHeight = 100;

        console.log("each");

    })
</script>


</body>
</html>